<template>
	<view>
		<view>
			<!-- 搜索框 -->
			<view class="wx-nav">
				<view class="left">
					<image class="png-style " src="@/static/icon/search.png" ></image>
				</view>
				<input type="text" v-model="query" class="searchC"/>
				<button @click="likeSerach" size="mini">搜索</button>
			</view>
			<view style="width: 100%; height: 1rpx; border-bottom: 1rpx solid gray;margin-top: 10rpx;"></view>
			<view class="list">
				<scroll-view scroll-y="true" class="list-left">
					<view @click="getData(type.id)" v-for="type in dataTopType" class="left-item"> {{ type.type}}</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="list-right">
					<view class="right-list" >
						<view @click="searchToPage(data.id)" v-for="data in typeData" class="right-item"> {{data.label ? data.label : ''}} {{data.type ? data.type: ''}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
 
 <script>
 	import tempUtil from '@/common/shoptemp.js'
	import typeUtil from '@/common/api/type/type.js'
 	export default {
 		data() {
 			return {
 				query:'', //切换分类
				dataTopType:[],
				typeData:[]
 			}
 		},
 		methods: {
 			searchToPage(){
 				this.query = '';
 			},
			//拉取顶级列表
			getTopTypeData(){
				typeUtil.getAllTopTypeData()
					.then(response=>{
						this.dataTopType = response.data.list;
					})
			},
			//拉取子级数据
			getData(id){
				typeUtil.getDataById(id)
					.then(response=>{
						this.typeData = response.data.list;
					})
			},
			likeSerach(){
				typeUtil.getTypeDataLike(this.query)
					.then(res => {
						this.typeData = res.data.list;
						this.query = '';
					})
			},
			searchToPage(id){
				uni.navigateTo({
					url: "/pages/search-list/search-list?type="+id
				})
			},
 		},
		created() {
			this.getTopTypeData();
		},
 	}
 </script>
 
<style>
	@import url("@/common/common.css");
	@import url("@/common/uni.css");
	.wx-nav{
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;
	}
	.png-style{
		width: 44rpx;
		height: 44rpx;
	}
	.right{
			position: absolute;
			padding-left: 80%;
	}
	.left{
			position: absolute;
			padding-right: 80%;
	}
	.searchC{
		margin-left: 20rpx;
		width: 66%;
		height: 20%; 
		border: 1px solid #444746;
		border-radius: 5rpx;
	}
	.content{
		width: 100%;
	}
	.sitem{
		float: left;
		width: 20%;
		height: 15%;
		background-color: #d9e1de;
		margin-left: 30rpx;
		border-radius: 20rpx;
	}
	.list{
		display: flex;
	}
	.list-left{
		width:150rpx;
	}
	.left-item{
		height: 80rpx;
		font-weight: bold;
		border-bottom: 2rpx solid #d8d8d8;
		font-size:28rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #f1f9f6;
	}
	.left-name{
		padding: 30rpx 6rpx;
		text-align:center;
	}
	.left-name-active{
		border-left: #66ccff;
	}
	.list-right{
		flex:1;
	}
	.list-title{
		font-weight: bold;
		padding: 30rpx 0;
	}
	.right-content{
		display: flex;
		flex-wrap: wrap;
	}
	.right-img{
		width: 150rpx;
		height: 150rpx;
	}
	.right-name{
		padding:16rpx 0;
	}
	.right-item{
		float: left;
		width: 20%%;
		padding-left: 20rpx;
		padding-top: 20rpx;
	}
	.right-list{
		width: 100%;
		float: left;
	}
</style>